
import React, { memo } from 'react';
import cs from 'classnames';
import sty from './sty.module.css';

import { getSizeImage } from '@/utils/format-utils';
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom';
const TopListCover = (props) => {
  const { topList, idx } = props;

  return <div className={sty.root}>
    {
      topList.length ? topList.map((v, i) =>
        <li key={v.id}  >
          {
            i === 0 ? <h3>云音乐特色榜</h3> : ''
          }
          {
            i === 4 ? <h3>全球集体榜</h3> : ''
          }
          <Link to={`/discover/ranking?id=${v.id}`}
            className={cs(sty.info, i === idx ? sty.bg : '')}
          >
            <img src={getSizeImage(v.coverImgUrl, 44)} alt="" />
            <div className={sty.right}>
              <div className={sty.title}>{v.name}</div>
              <div className={sty.update}>{v.updateFrequency}</div>
            </div>
          </Link>
        </li>) : null
    } </div>

}

TopListCover.propTypes = {
  idx: PropTypes.number,
  topList: PropTypes.array
}
TopListCover.defaultProps = {
  topList: [],
  idx: 0
}
export default memo(TopListCover)